<template>
  <el-container class="home-container">
    <!-- 头部导航栏 -->
    <el-header class="header">
      <el-row justify="space-between" align="middle">
        <el-col :span="6">
          <div class="logo">
            <img src="../assets/logo/logo.png" alt="五大连池三维信息管理系统" class="logo-img">
            <h1 class="logo-text">五大连池三维信息管理系统</h1>
          </div>
        </el-col>
        <el-col :span="12">
          <el-menu class="header-menu" mode="horizontal">
            <el-menu-item index="2" @click="goToPage('monitoring')">水文监测</el-menu-item>
            <el-menu-item index="2" @click="goToPage('monitoring')">气象监测</el-menu-item>
            <el-menu-item index="2" @click="goToPage('monitoring')">冷泉监测</el-menu-item>
            <el-menu-item index="2" @click="goToPage('monitoring')">地质遗迹</el-menu-item>
            <el-menu-item index="2" @click="goToPage('monitoring')">设备管理</el-menu-item>
            <el-menu-item index="3" @click="goToPage('monitoring')">系统管理</el-menu-item>
            <el-menu-item index="5" @click="goToPage('about')">关于我们</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4">
          <div class="time-display">
            <span>{{ currentTime }}</span>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="main-content">
      <el-row gutter="20">
        <!-- 左侧功能区 -->
        <el-col :span="7">
          <div class="function-area">
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>水文监测</h3>
                  <p>实时监测水文数据，查看监测站点</p>
                </div>
              </el-card>
            </div>
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>气象监测</h3>
                  <p>实时监测气象数据，查看监测站点</p>
                </div>
              </el-card>
            </div>
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>冷泉监测</h3>
                  <p>实时监测冷泉数据，查看监测站点</p>
                </div>
              </el-card>
            </div>
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>地质遗迹</h3>
                  <p>监测火山地质遗迹数据，查看监测站点</p>
                </div>
              </el-card>
            </div>
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>设备管理</h3>
                  <p>管理系统相关设备信息，查看信息</p>
                </div>
              </el-card>
            </div>
            <div class="function-card" @click="goToMonitoring">
              <el-card shadow="hover" class="function-card-inner">
                <div class="function-card-content">
                  <h3>帮助中心</h3>
                  <p>系统操作视频教程，查看常见问题</p>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>

        <!-- 右侧信息区 -->
        <el-col :span="17">
          <el-row gutter="20">
            <!-- 通知公告 -->
            <el-col :span="12">
              <el-card class="info-card">
                <template #header>
                  <div class="card-header">
                    <span>通知公告</span>
                    <el-button type="text" @click="viewAllNotices">查看更多</el-button>
                  </div>
                </template>
                <el-table :data="notices" class="notice-table" height="380">
                  <el-table-column prop="date" label="日期" width="100"></el-table-column>
                  <el-table-column prop="title" label="标题">
                    <template #default="scope">
                      <a href="javascript:;" class="notice-title" @click="viewNotice(scope.row)">{{ scope.row.title }}</a>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>

            <!-- 站点地图展示 -->
            <el-col :span="12">
              <el-card class="info-card">
                <template #header>
                  <div class="card-header">
                    <span>监测站点分布</span>
                    <el-tooltip content="点击查看大图" placement="top">
                      <i class="el-icon-view enlarge-map" @click="enlargeMap"></i>
                    </el-tooltip>
                  </div>
                </template>
                <div id="monitoring-map" class="monitoring-map">
                  <div class="map-placeholder">
                    <!-- <img src="/images/监测站点分布_20250514231500.png" alt="监测站点地图"> -->
                    <div class="map-info">
                      <p>当前监测站点: 25个</p>
                      <p>正常运行: 24个</p>
                      <p>需维护: 1个</p>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row >
          <el-row gutter="20"> 
            <el-col :span="12">
              <el-card class="info-card">
                <template #header>
                  <div class="card-header">
                    <span>系统信息</span>
                  </div>
                </template>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card class="chart-card">
                      <div ref="cpuChartRef" class="chart"></div>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card class="chart-card">
                      <div ref="memoryChartRef" class="chart"></div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="info-card">
                <template #header>
                  <div class="card-header">
                    <span>友情链接</span>
                  </div>
                </template>
                <el-row class="quick-access" gutter="20" justify="space-between">
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/林草局20190411.png')">
                      <div class="quick-access-info">
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/生态环境部20190411.png')">
                      <div class="quick-access-info">
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/中国气象局20190411.png')">

                      <div class="quick-access-info"></div>
                    </el-card>
                  </el-col>
                </el-row>
                <el-row class="quick-access" gutter="20" justify="space-between"> 
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/自然资源部20190411.png')">
                      <div class="quick-access-info"></div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/水利部20190411.png')">

                      <div class="quick-access-info"></div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="quick-access-card" style="background-image: url('/images/五大连池市_20250514215447.png')">

                      <div class="quick-access-info"></div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

          </el-row>
          <!-- 快捷访问相关网站 -->
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部信息 -->
    <el-footer class="footer">
      <div class="footer-content">
        <div class="copyright">
          <p>© 2023 五大连池三维信息管理系统 版权所有</p>
          <p>技术支持：五大连池水利监测中心</p>
        </div>
        <div class="contact-info">
          <p>地址：黑龙江省黑河市五大连池市某某某某号</p>
          <p>电话：0456-12345678 | 邮箱：wudalianchi@watermonitor.gov.cn</p>
        </div>
      </div>
    </el-footer>

    <!-- 通知详情对话框 -->
    <el-dialog v-model="noticeDialogVisible" title="通知详情" width="50%">
      <el-card v-for="notice in selectedNotices" :key="notice.id" class="notice-detail-card" shadow="hover">
        <template #header>
          <div class="notice-detail-header">
            <span>{{ notice.title }}</span>
            <span class="notice-date">{{ formatDate(notice.date) }}</span>
          </div>
        </template>
        <div class="notice-content">
          {{ notice.content }}
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="noticeDialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="noticeDialogVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 地图放大对话框 -->
    <el-dialog v-model="mapDialogVisible" title="监测站点分布" width="80%" top="5vh">
      <div id="enlarged-map" class="enlarged-map"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="mapDialogVisible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
// 通知数据
const notices = ref([
  {
    id: 1,
    date: '2023-10-15',
    title: '关于五大连池水位监测设备维护的通知',
    content: '将于2023年10月20-22日对部分水位监测设备进行维护，期间可能影响数据上传。'
  },
  {
    id: 2,
    date: '2023-09-28',
    title: '关于加强汛期监测工作的通知',
    content: '近期将迎来汛期，请各相关部门加强监测，及时上报监测数据。'
  },
  {
    id: 3,
    date: '2023-09-15',
    title: '五大连池水质监测报告发布',
    content: '2023年第三季度五大连池水质监测报告已发布，请各部门查阅。'
  }
])

// 选中的通知
const selectedNotices = ref([])

// 对话框状态
const noticeDialogVisible = ref(false)
const mapDialogVisible = ref(false)

// 点击通知查看详情
const viewNotice = (notice) => {
  selectedNotices.value = [notice]
  noticeDialogVisible.value = true
}

// 查看所有通知
const viewAllNotices = () => {
  selectedNotices.value = [...notices.value]
  noticeDialogVisible.value = true
}

// 放大地图
const enlargeMap = () => {
  mapDialogVisible.value = true
  // 这里可以添加加载地图的逻辑
  setTimeout(() => {
    // 模拟地图加载完成
    ElMessage.success('地图加载完成')
  }, 1000)
}

// 格式化日期
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 页面导航
const goToPage = (page) => {
  switch(page) {
    case 'dashboard':
      // 这里可以添加导航逻辑
      break
    case 'monitoring':
      goToMonitoring()
      break
    case 'resources':
      goToResources()
      break
    case 'analysis':
      goToAnalysis()
      break
    case 'about':
      // 这里可以添加导航逻辑
      break
    default:
      break
  }
}

// 跳转到水文监测
const goToMonitoring = () => {
  ElMessage.success('跳转到水文监测页面')
  // 实际项目中使用 router.push('/monitoring')
}

// 跳转到资源管理
const goToResources = () => {
  ElMessage.success('跳转到资源管理页面')
  // 实际项目中使用 router.push('/resources')
}

// 跳转到数据分析
const goToAnalysis = () => {
  ElMessage.success('跳转到数据分析页面')
  // 实际项目中使用 router.push('/analysis')
}

// 打开外部链接
const openExternal = (url) => {
  window.open(url, '_blank')
}
// 定义时间 
 const currentTime = ref('')

// 更新时间的方法
// 更新时间的方法
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，需要 +1
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 系统信息图表
// CPU 数据
const cpuData = {
  user: 1.05,
  system: 1.35,
  idle: 97.31
}

// 内存数据
const memoryData = {
  total: 11.72,
  used: 10.18,
  free: 1.54,
  usage: 86.83
}

// 图表引用
const cpuChartRef = ref(null)
const memoryChartRef = ref(null)
let cpuChartInstance = null
let memoryChartInstance = null

// 初始化CPU图表
const initCpuChart = () => {
  if (!cpuChartRef.value) return
  
  cpuChartInstance = echarts.init(cpuChartRef.value)
  
  const option = {
    title: {
      text: 'CPU使用率',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
      orient: 'vertical',
      right: 5,
      top: 30,
      data: ['用户使用率', '系统使用率', '当前空闲率']
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
            formatter: '{b}: {c}%'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: cpuData.user, name: '用户使用率' },
          { value: cpuData.system, name: '系统使用率' },
          { value: cpuData.idle, name: '当前空闲率' }
        ]
      }
    ],
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `使用率:${cpuData.system}%`,
          fill: '#333',
          fontWeight: 'bold',
          fontSize: 16
        }
      }
    ]
  }

  cpuChartInstance.setOption(option)
}

// 初始化内存图表
const initMemoryChart = () => {
  if (!memoryChartRef.value) return
  
  memoryChartInstance = echarts.init(memoryChartRef.value)
  
  const option = {
    title: {
      text: '内存使用情况',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}GB ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 30,
      data: ['已用内存', '剩余内存']
    },
    series: [
      {
        name: '内存使用',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
            formatter: '{b}: {c}GB\n({d}%)'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { 
            value: memoryData.used, 
            name: '已用内存',
            itemStyle: { color: '#ee6666' }
          },
          { 
            value: memoryData.free, 
            name: '剩余内存',
            itemStyle: { color: '#91cc75' }
          }
        ]
      }
    ],
    graphic: {
      type: 'text',
      left: 'center',
      top: '45%',
      style: {
        text: `总内存: ${memoryData.total}GB\n使用率: ${memoryData.usage}%`,
        fill: '#333',
        fontSize: 14,
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  }

  memoryChartInstance.setOption(option)
}

// 图表自适应
const resizeCharts = () => {
  cpuChartInstance?.resize()
  memoryChartInstance?.resize()
}

// 页面加载完成后初始化
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
  initCpuChart()
  initMemoryChart()
  window.addEventListener('resize', resizeCharts)
  // ElMessage.success('资源监控图表加载完成')
  // // 初始化地图
  // setTimeout(() => {
  //   // 模拟地图初始化完成
  //   ElMessage.success('地图初始化完成')
  // }, 1500)
})
// 页面卸载前清理
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeCharts)
  cpuChartInstance?.dispose()
  memoryChartInstance?.dispose()
})
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 60px !important;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-menu {
  border: none;
}

/* 主内容区样式 */
.main-content {
  flex: 1 0 auto;
  padding: 20px;
  overflow-y: auto;
}

/* 功能区域样式 */
.function-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.function-card {
  cursor: pointer;
  transition: transform 0.3s;
  color: #1890ff;
}

.function-card:hover {
  transform: translateY(-5px);
}

.function-card-inner {
  display: flex;
  align-items: center;
  padding: 20px;
  height: 120px;
  border-radius: 8px;
}

.function-card-icon {
  width: 50px;
  height: 50px;
  background-color: #e6f7ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  font-size: 24px;
  color: #1890ff;
}

.function-card-content {
  flex: 1;
}

.function-card-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

.function-card-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 信息卡片样式 */
.info-card {
  height: 400px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-weight: bold;
}

.enlarge-map {
  cursor: pointer;
  color: #409eff;
}

/* 监测站点地图样式 */
.monitoring-map {
  height: 350px;
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}

.map-placeholder {
  height: 100%;
  background-image: url('/images/监测站点分布_20250514231500.png');
  background-size: cover; /* 背景图覆盖整个区域 */
  background-position: center; /* 居中显示背景图 */
  background-repeat: no-repeat; /* 不重复 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}

.map-placeholder img {
  width: 80%;
  max-width: 300px;
  height: auto;
}

.map-info {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

/* 快捷访问区域样式 */
.quick-access {
  margin-top: 20px;
}

.quick-access-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  height: 120px;
  background-size: contain;  /*背景图覆盖整个区域 */
  background-position: center; /* 居中显示背景图 */
  background-repeat: no-repeat; /* 不重复 */
}

.quick-access-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.quick-access-icon img {
  width: 80%;
  height: auto;
}

.quick-access-info {
  text-align: center;
}

.quick-access-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.quick-access-info a {
  color: #409eff;
  text-decoration: none;
}

/* 底部样式 */
.footer {
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.copyright {
  margin-bottom: 10px;
}

/* 对话框样式 */
.notice-detail-card {
  margin-bottom: 15px;
}

.notice-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-date {
  color: #999;
  font-size: 14px;
}

.notice-content {
  padding: 15px 0;
  font-size: 14px;
  line-height: 1.6;
}

.enlarged-map {
  height: 80vh;
  background-color: #f5f7fa;
}
.time-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
/* 新增图表样式 */
.chart-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart {
  width: 100%;
  height: 400px;
}
</style>